<template>
    <div class="site-aside-container">
        <div class="content">
            <Avatar :url="url" :size="100" />
            <NavMenu></NavMenu>
        </div>
        <canvas ref="rain" id="rain"></canvas>
    </div>
</template>

<script>
import Avatar from "@/components/Avatar";
import SelfInfo from "./SelfInfo";
import NavMenu from "./NavMenu";
import { getAvatarApi } from "@/api/userInfo.js";
export default {
    components: {
        Avatar,
        SelfInfo,
        NavMenu,
    },
    data() {
        return {
            url: "",
            ctx: null,
            timer: null,
        };
    },
    computed: {},
    async created() {
        let data = await getAvatarApi();
        this.url = data.url;
    },
    mounted() {
        this.initRain();
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        initRain() {
            if (this.timer) clearInterval(this.timer);
            const canvas = this.$refs.rain;
            const ctx = this.$refs.rain.getContext("2d");
            canvas.width = 300;
            canvas.height = screen.availHeight;
            const rainArr = Array(300 / 10).fill(10);
            const strArr = "0101010101010101".split("");
            const rain = () => {
                ctx.fillStyle = "rgba(0,0,0,0.05)";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = "#0f0";
                rainArr.forEach((item, index) => {
                    ctx.fillText(
                        strArr[Math.floor(Math.random() * strArr.length)],
                        index * 10,
                        item
                    );
                    rainArr[index] =
                        item > canvas.height || item > Math.random() * 10000
                            ? 0
                            : item + 10;
                });
            };
            this.timer = setInterval(rain, 40);
        },
    },
};
</script>

<style lang="less" scoped>
.site-aside-container {
    width: 300px;
    height: 100%;
    color: #ffffff;
    position: relative;
    > .content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
        .avatar-container {
            margin: 0 auto 100px;
        }
    }
    > .rain {
    }
}
</style>
